<!doctype html>
<html lang="en">
  <head>
    <title>Vis Network | Labels | Label Alignment</title>

    <script
      type="text/javascript"
      src="../../../standalone/umd/vis-network.min.js"
    ></script>

    <style type="text/css">
      #mynetwork {
        width: 600px;
        height: 400px;
        border: 1px solid lightgray;
      }
      p {
        max-width: 600px;
      }
    </style>
  </head>

  <body>
    <p>Labels of edges can be aligned to edges in various ways.</p>
    <p>
      Text-alignment within node labels can be 'left' or 'center', other font
      alignments not implemented.
    </p>
    <p>
      Label alignment (placement of label &quot;box&quot;) for nodes (top,
      bottom, left, right, inside) is planned but not in vis yet.
    </p>
    <p>
      The click event is captured and displayed to illustrate how the clicking
      on labels works. You can drag the nodes over each other to see how this
      influences the click event values.
    </p>

    <div id="mynetwork"></div>

    <h2 id="eventSpanHeading"></h2>
    <pre id="eventSpanContent"></pre>

    <script type="text/javascript">
      // create an array with nodes
      var nodes = [
        { id: 1, label: "Node 1" },
        { id: 2, label: "Node 2" },
        {
          id: 3,
          label: "Node 3:\nLeft-Aligned",
          font: { face: "Monospace", align: "left" },
        },
        { id: 4, label: "Node 4" },
        {
          id: 5,
          label: "Node 5\nLeft-Aligned box",
          shape: "box",
          font: { face: "Monospace", align: "left" },
        },
      ];

      // create an array with edges
      var edges = [
        { from: 1, to: 2, label: "middle", font: { align: "middle" } },
        { from: 1, to: 3, label: "top", font: { align: "top" } },
        { from: 2, to: 4, label: "horizontal", font: { align: "horizontal" } },
        { from: 2, to: 5, label: "bottom", font: { align: "bottom" } },
      ];

      // create a network
      var container = document.getElementById("mynetwork");
      var data = {
        nodes: nodes,
        edges: edges,
      };
      var options = { physics: false };
      var network = new vis.Network(container, data, options);

      network.on("click", function (params) {
        params.event = "[original event]";
        document.getElementById("eventSpanHeading").innerText = "Click event:";
        document.getElementById("eventSpanContent").innerText = JSON.stringify(
          params,
          null,
          4,
        );
      });
    </script>
  </body>
</html>
